import Link from "next/link";
import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { EventRow } from "@/components/event-row";
import { LiveFeed } from "@/components/live-feed";
import { Badge, Bar, Chip, Empty, PageHeader, Panel, Stat, Table, Td, TierBadge } from "@/components/ui";
import { api } from "@/lib/api";
import { feedHref, fmtInt, relTime, typeLabel } from "@/lib/format";

export const dynamic = "force-dynamic";

/** Section order and labels for the desk (spec §104). Unknown categories are appended in API order. */
const SECTIONS: { key: string; label: string }[] = [
  { key: "government", label: "Government" },
  { key: "finance", label: "Business & markets" },
  { key: "infrastructure", label: "Infrastructure" },
  { key: "health", label: "Health" },
  { key: "news", label: "Media" },
  { key: "cyber", label: "Cyber" },
  { key: "ai", label: "AI" },
  { key: "science", label: "Science" },
];

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
  const { slug } = await params;
  const d = await api.country(slug);
  if (!d) return { title: "Country not found" };
  return { title: `${d.country.name} desk`, description: `Government, business, infrastructure, health, media, cyber, AI and science signals from ${d.country.name}, detected live by WebSensor.`, alternates: { canonical: `/country/${slug}` } };
}

export default async function CountryPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const d = await api.country(slug);
  if (!d) notFound();
  const code = d.country.code;
  const name = d.country.name;
  const events24 = d.sources.reduce((n, s) => n + (s.events_24h ?? 0), 0);
  const ordered = [...SECTIONS.map((s) => ({ ...s, items: d.by_category.find((c) => c.category === s.key)?.items ?? [] })), ...d.by_category.filter((c) => !SECTIONS.some((s) => s.key === c.category)).map((c) => ({ key: c.category, label: c.category, items: c.items }))];
  const maxType = Math.max(1, ...d.by_type.map((t) => t.n));
  const firstParty = d.sources.filter((s) => s.first_party !== false).length;
  return (
    <>
      <PageHeader
        compact
        kicker={<span className="flex items-center gap-2"><Link href="/country" className="hover:text-fg">Countries</Link> <span className="text-fg-subtle">/</span> <span className="font-mono">{code}</span></span>}
        title={<span className="flex items-center gap-2"><span aria-hidden>{d.country.flag}</span> {name}</span>}
        description={`Official government, business, infrastructure, health and media signals from ${name}, grouped by desk. Sources are the organizations' own channels; media reports are marked EXTERNAL.`}
        actions={<Link href={feedHref({ country: code }, "/live")} className="rounded-md border border-line bg-panel px-2.5 py-1 text-[12px] hover:border-line-strong">Live feed →</Link>}
      />
      <div className="panel mb-4 grid grid-cols-2 divide-x divide-y divide-line sm:grid-cols-4 sm:divide-y-0">
        <Stat label="Sources" value={fmtInt(d.sources.length)} hint={`${fmtInt(firstParty)} first-party · ${fmtInt(d.sources.length - firstParty)} media`} />
        <Stat label="Events · 24 h" value={fmtInt(events24)} tone="signal" hint="meaningful signals" />
        <Stat label="Breaking · 24 h" value={fmtInt(d.breaking.length)} tone={d.breaking.length ? "hot" : undefined} hint="signal ≥ 80" />
        <Stat label="Silent" value={fmtInt(d.silent.length)} tone={d.silent.length ? "silent" : undefined} hint="no matching announcement" />
      </div>

      <div className="grid gap-4 xl:grid-cols-[1fr_360px]">
        <div className="flex min-w-0 flex-col gap-4">
          <Panel title={<span className="text-hot">Major events · 24 h</span>} dense action={<Link href={feedHref({ country: code, signal_min: 80 }, "/live")} className="text-[11px] text-fg-subtle hover:text-fg">live →</Link>}>
            {d.breaking.length ? d.breaking.map((e) => <EventRow key={e.id} ev={e} />) : <Empty>No breaking signal from {name} in the last 24 h.</Empty>}
          </Panel>
          <div className="grid gap-4 md:grid-cols-2">
            {ordered.map((s) => (
              <Panel key={s.key} title={s.label} dense action={<Link href={feedHref({ country: code, category: s.key }, "/live")} className="text-[11px] text-fg-subtle hover:text-fg">live →</Link>}>
                {s.items.length ? s.items.map((e) => <EventRow key={e.id} ev={e} />) : <Empty>No {s.label.toLowerCase()} signal from {name} recently.</Empty>}
              </Panel>
            ))}
          </div>
          <LiveFeed initial={d.recent} initialCursor={d.nextCursor} extraQuery={{ country: code }} initialFilters={{ country: code }} showTabs={false} title={`LIVE · ${name.toUpperCase()}`} />
        </div>
        <aside className="flex min-w-0 flex-col gap-4">
          <Panel title={<span className="text-silent">Silent changes</span>} dense action={<Link href={feedHref({ country: code, silent_change: true }, "/live")} className="text-[11px] text-fg-subtle hover:text-fg">all →</Link>}>
            {d.silent.length ? d.silent.map((e) => <EventRow key={e.id} ev={e} />) : <Empty>No silent change from {name}.</Empty>}
          </Panel>
          <Panel title="By type · 7 d" dense>
            {d.by_type.length ? (
              <ul className="divide-y divide-line">
                {d.by_type.map((t) => (
                  <li key={t.event_type} className="grid grid-cols-[9rem_1fr_3.5rem] items-center gap-2 px-3 py-1.5 text-[12.5px]">
                    <Link href={feedHref({ country: code, event_type: t.event_type }, "/live")} className="truncate hover:underline">{typeLabel(t.event_type)}</Link>
                    <Bar value={t.n} max={maxType} tone="info" />
                    <span className="text-right font-mono text-fg-subtle tabular">{fmtInt(t.n)}</span>
                  </li>
                ))}
              </ul>
            ) : (
              <Empty />
            )}
          </Panel>
        </aside>
      </div>

      <Panel title={`Sources · ${d.sources.length}`} dense className="mt-4" action={<Link href={`/sources?country=${code}`} className="text-[11px] text-fg-subtle hover:text-fg">filter sources →</Link>}>
        {d.sources.length === 0 ? (
          <Empty>No source is attributed to {name} yet.</Empty>
        ) : (
          <Table head={["Tier", "Source", "Domain", "Kind", "Categories", "Sensors", "Events 24 h", "Last event"]}>
            {d.sources.map((s) => (
              <tr key={s.id} className="hover:bg-panel-2/60">
                <Td><TierBadge tier={s.tier} /></Td>
                <Td><Link href={`/source/${s.id}`} className="font-medium hover:underline">{s.name}</Link></Td>
                <Td mono><Link href={`/domain/${s.domain}`} className="text-fg-muted hover:underline">{s.domain}</Link></Td>
                <Td>{s.first_party === false ? <Badge kind="external" compact /> : <Badge kind="first-party" compact />}</Td>
                <Td><div className="flex flex-wrap gap-1">{s.categories.slice(0, 3).map((c) => <Chip key={c} href={`/category/${c}`}>{c}</Chip>)}</div></Td>
                <Td mono>{s.sensor_count ?? 0}</Td>
                <Td mono>{fmtInt(s.events_24h ?? 0)}</Td>
                <Td mono className="text-fg-subtle">{s.last_event_at ? relTime(s.last_event_at) : "—"}</Td>
              </tr>
            ))}
          </Table>
        )}
      </Panel>
    </>
  );
}